import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

/*  白清如
    解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
      注意位置： 放在new VueRouter() 上面
*/
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
};

// 路由表配置
const routes = [
  // 首页是Index/index.vue
  {
    path: "/",
    redirect: "/index",
    component: () => import("../views/Index/index.vue")
  },
  {
    path: "/index",
    name: "index",
    component: () => import("../views/Index/index.vue")
  },
  // 排行榜页面
  {
    path: "/rank",
    name: "Rank",
    component: () => import("../views/Rank/index.vue")
  },
  // 歌单页面
  {
    path: "/playlist",
    name: "PlayList",
    component: () => import("../views/PlayList/index.vue")
  },
  // 单个歌单详情页面
  {
    path: "/playlist/detail",
    name: "Detail",
    component: () => import("../views/PlayList/detail.vue")
  },
  // 歌手集合页面
  {
    path: "/artist",
    name: "Artist",
    component: () => import("../views/Artist/index.vue")
  },
  // 歌手详情页面
  {
    path: "/singer",
    name: "Singer",
    component: () => import("../views/Singer/index.vue")
  },
  // 我的个人中心页面
  {
    path: "/my",
    name: "My",
    component: () => import("../views/My/index.vue")
  },
  // MV列表展示页面
  {
    path: "/mvlist",
    name: "MvList",
    component: () => import("../views/MvList/index.vue")
  },
  // MV播放页面
  {
    path: "/mvPlay",
    name: "MvPlay",
    component: () => import("../views/MvList/MvPlay/index.vue")
  },
  // 搜索页面
  {
    path: "/search",
    name: "Search",
    component: () => import("../views/Search/index.vue")
  },
  // 歌曲页面
  {
    path: "/songs",
    name: "Songs",
    component: () => import("../views/Songs/index.vue")
  },
  // 专辑页面
  {
    path: "/albums",
    name: "Albums",
    component: () => import("../views/Albums/index.vue")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  /*
    问题阐述:
      在页面拉动滚动条，刷新浏览器会发现滚动条依然在原来的位置，这是浏览器的默认行为，会记录浏览器滚动条默认位置。
      但点击浏览器“前进/后退”按钮，会发现当初那个页面的滚动条从0开始了，没有记录上一次滚动条的位置。
    需求:
      现在要求点击浏览器“前进/后退”按钮，页面滚动条要记录上一次的位置，这时需要设置它的的滚动行为。
    解决方法:
      在路由配置中设置 scrollBehavior(to,from,savePosition)函数，函数有三个参数。
      scrollBehavior() 函数在点击浏览器的“前进/后退”，或者切换导航的时候触发。
    语法:
      scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。
        // to：要进入的目标路由对象，到哪里去
        // from：离开的路由对象，哪里来
        // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
      }
      * */
  scrollBehavior() {
    return { x: 0, y: 0 };
  }
});

export default router;
